<template>
  <!-- 侧边栏的组件 -->
  <div class="tabbar" ref="tabbarRef">
    <!-- 侧边栏头部logo -->
    <img id="top_pic" :src="imgSrc" />
    <div class="topMsg">
      <!-- 这里主要获取配货数据的轻提示 badge是0的话，隐藏数字标记，否则就显示 （当有客户调货信息的时候显示）-->
      <el-badge :value="badge" :hidden="!badge">
        <i class="el-icon-bell" @click="goToAllocation"></i>
      </el-badge>
      <p>{{ user }}</p>
      <!-- <el-button class="top_button" type="primary">开通服务</el-button> -->
    </div>
    <div class="bar-list">
      <!-- 为主菜单添加背景色 -->
      <div
        v-for="items in menuList"
        :key="items.name"
        :class="{
          active:
            $route.path.includes(items.name) ||
            ($route.path.indexOf(items.name) == -1 ? false : true)
        }"
      >
        <img :src="items.img" />
        <p>{{ items.label }}</p>
        <!-- 侧边栏的子菜单 -->
        <div class="secondaryMenu">
          <div
            v-for="v in items.secondaryMenu"
            :key="v.name"
            :class="{
              secondActive:
                $route.path.includes(v.name) ||
                ($route.path.indexOf(v.name) == -1 ? false : true)
            }"
            @click="addNav({ label: v.label, name: v.name, path: v.path })"
          >
            <router-link
              href="#"
              :to="
                v.label == '进销存分析' || v.label == '进销存总查询'
                  ? ''
                  : v.path
              "
              :class="
                v.label == '进销存分析' || v.label == '进销存总查询'
                  ? 'secDisable'
                  : ''
              "
              >{{ v.label }}</router-link
            >
          </div>
        </div>
      </div>
    </div>
    <!-- <ul>
      <li v-for="items in menuList" :key="items.name" :class="{active: $route.path.includes(items.name) || ($route.path.indexOf(items.name) == -1 ? false : true)}">
        <img :src="items.img">
        <p>{{items.label}}</p>
        <div class="secondaryMenu">
          <div v-for="v in items.secondaryMenu" :key="v.name" :class="{secondActive: $route.path.includes(v.name) || ($route.path.indexOf(v.name) == -1 ? false : true)}" @click="addNav({label: v.label, name: v.name, path: v.path})">
            <router-link href="#" :to="v.path">{{v.label}}</router-link>
          </div>
        </div>
      </li>
    </ul> -->

    <div id="prompt" class="tabbarBtn" v-if="promptText">{{ promptText }}</div>
    <div class="Import" @click="download">
      <i class="el-icon-download"></i> 导入模板
    </div>
    <div class="Import1" @click="userManual">
      <i class="el-icon-download"></i> 使用手册
    </div>
    <div id="purchaseBtn" class="tabbarBtn" @click="open">升级/续费</div>
    <div class="registerInfo">
      <p>注册编号</p>
      <p>{{ number }}</p>
      <p>注册时间</p>
      <p>{{ time }}</p>
    </div>
    <div @click="logOut" class="tabbarBtn" id="outBtn">退出登录</div>
  </div>
</template>

<script>
// 新加的
// import resources1 from "../config/tabBar.js";
// console.log(resources1);
const resources = require('../config/tabBar.js') // 导入的是侧边栏标题的数据，commomdJS规定默认导出的数据，暴露在module.exports中
// console.log("数据源", resources);
import { menuNumberAdd } from '../network/home' // 获取菜单点击统计次数
import { customerAllocation } from '../network/home'
import cookieFn from '../components/mixins/cookieFn'

export default {
  name: 'tabbar',
  mixins: [cookieFn],
  data() {
    return {
      badge: 0,
      user: '',
      menuList: [],
      number: '',
      time: '',
      isExpired: '', // badge是否有数据
      imgSrc: null,
      promptText: ''
    }
  },
  // "jxAgent=0; jxStore=0; jxUpdateCommand=666666; jxDeleteCommand=666666; jxChangeOrder=1; jxMonthly=1; jxReceive=1; jxOutCusInfo=1; jxPrincipal=1; jxVersionType=3; jxShowCost=1; jxAu=1; jxAccount=18692188575; jxUser=郭勇先生; jxSoftWareCustomerId=1440781671; jxRegisterTime=2021-07-03; jxMenu=,进货管理,厂商进货,厂商退货,厂商进销比,厂商进货查询,厂商退货查询,品牌销售查询,基本资料,厂商建档,品牌建档,颜色建档,尺码建档,品名建档,附件建档,成份建档,仓库建档,部门建档,职员建档,客户建档,款号建档,成本建档,科目建档,现金银行流量,订单管理,客户订货,客户订货查询,客户订货合计,订货未交查询,厂商订货,厂商订货查询,厂商订货合计,订货明细,账务管理,销售明细汇总,对账明细总表,客户收款结账,寄卖对账单,客户其他应收,其他应收查询,厂商对账单,月结操作,厂商对账,客户管理,客户进货,客户退货,客户销货,客户配货,客户返修,客户调货,客户销售未补,销售分析图表,客户进货查询,客户退货查询,客户销货查询,盘点销退货,未出款查询,综合查询,直营店管理,店铺销售,店铺盘点,店铺退货,库存与调货,VIP信息表,业绩积分查询,店铺销售查询,店铺盘点查询,店铺退货查询,店铺验收,店铺进货查询,库存管理,仓库盘点,仓库盘差,仓库调拨,仓库库存表,客户库存表,货品畅销排行,进销存分析,仓库盘点查询,仓库盘差查询,仓库调拨查询,进销存总查询,RFID跟踪查询,款号明细记录,系统管理,系统设置,权限设置,季度转换,操作记录,修改登录密码,条码机测试,读卡器测试,; jxShippingAmount=0; jxET=2022-07-06; jxQuarter=21春夏"
  created() {
    // console.log('tb created')
    this.user = this.getCookie('jxUser') // 在cookie中获取用户名字
    this.number = this.getCookie('jxSoftWareCustomerId') // 在cookie中获取用户的注册编号
    this.time = this.getCookie('jxRegisterTime') // 在cookie中获取用户的注册时间
    this.isExpired = this.getCookie('jxIsExpired') // console.log(isExpired), 啥也没有, 应该要后端返回数据, 估计是看是否有badge数据

    // 是否已授权
    const jxAu = this.getCookie('jxAu') // 获取用户是否购买软件，1 是购买， 0 是还没有购买
    const jxET = this.getCookie('jxET') // 获取用户的注册时间
    const jxVersionType = this.getCookie('jxVersionType') // 获取用户正在使用的版本信息， ‘1是旗舰版’, '2是专业版'， ‘3是企业版’
    // console.log(jxAu);  1
    // console.log(jxET);  2022-04-16
    let typeStr = ''
    switch (jxVersionType) {
      case '1':
        typeStr = '旗舰'
        break
      case '2':
        typeStr = '专业'
        break
      case '3':
        typeStr = '企业'
        break
      default:
        break
    }

    const d1 = new Date()
    const d2 = new Date(jxET) // jxET=2022-04-16 用户的注册时间，不管你时间是啥格式，你放进date里面就会被格式化成中国区的时间格式
    // console.log(d1); // Sat Oct 02 2021 09:17:39 GMT+0800 (中国标准时间)
    // console.log(d2); // Sat Apr 16 2022 08:00:00 GMT+0800 (中国标准时间)
    // console.log(d2.getTime() - d1.getTime(), "这个是减法的时间"); 然后换算成天数
    let d = Math.round((d2.getTime() - d1.getTime()) / (1000 * 60 * 60 * 24)) // 给定数的值四舍五入到最接近的整数
    // console.log(d); // 196

    if (jxAu === '0') {
      // 如果jxAu===0,证明用户还没有购买，提示用户购买
      this.promptText =
        '尊敬的客户，您注册的ERP' +
        typeStr +
        '版于' +
        d +
        '天后过期，请尽快购买'
    } else {
      // 如果用户购买了，使用剩下的天数还有8天的时候，提示一下用户要尽快续费
      if (d < 8 && d > 0) {
        this.promptText =
          '尊敬的客户，您购买的ERP' +
          typeStr +
          '版需于' +
          d +
          '天内续费，一旦过期则账户不可用，请尽快续费'
      }
    }
    // console.log(jxVersionType) // 根据用户使用什么样的版本,来决定显示什么样的版本图片
    switch (jxVersionType) {
      case '1':
        this.imgSrc = require('../assets/img/home/旗舰logo.png')
        break
      case '2':
        this.imgSrc = require('../assets/img/home/专业logo.png')
        break
      case '3':
        this.imgSrc = require('../assets/img/home/企业logo.png')
        break
      default:
        break
    }
    if (this.isExpired) return // 整个函数都在created方法里面 , 如果cookie过期，直接退出这个方法，不再执行下面的语句

    let menu = this.getCookie('jxMenu') // 操作记录,修改登录密码,条码机测试,读卡器测试; 和系统设置的子菜单一样的
    // console.log("这个是在cookie获取的", menu); // 获取cookie中所有的菜单，进行遍历匹配
    let isStore = this.getCookie('jxStore') // 0 是显示全部，1是否是直营店
    let isAgent = this.getCookie('jxAgent') // 0 是显示全部， 1 这个是判断，是否是直营店

    this.menuList = resources.menuList // 把导入的数据取出来，然后遍历生成一，二级菜单项
    // console.log(this.menuList, 'menuListmenuList')
    // // 获取配货提醒单数据
    customerAllocation().then((res) => {
      // console.log(localStorage.getItem('isStore'))
      if (localStorage.getItem('isStore') == 'true') return
      this.badge = res.data.data.length
    })
    // console.log(isStore)
    // return
    // 不同人显示不同的菜单
    // isAgent = 1;

    if (isStore == 1 || isAgent == 1) {
      // 如果是（代理）直营店，那么侧边栏就仅仅显示直营店管理和其子菜单，就是将遍历的数组重新赋值
      this.menuList = [this.menuList[6]]
      return
    } else {
      // 如果是企业版的话(就是功能齐全的话，那么直营店铺管理的字菜单，就只有2字菜单的两项)
      let tmp = this.menuList[6].secondaryMenu
      this.menuList[6].secondaryMenu = [tmp[1], tmp[3]]
    }

    // ————————————————开始————————————

    //  这个主要是防止前段和后端随便添加菜单项的，想要新增，必须要一起添加，否则下面逻辑会直接双重遍历删除
    // menuList 是自己编写导入的数组
    for (let i = 0; i < this.menuList.length; i++) {
      if (i == 6) continue // i === 6的时候，跳出===6的这一次循环
      const e = this.menuList[i]
      // console.log(e); // 打印一级菜单
      // console.log(e.label);
      // console.log(menu.indexOf(e.label)); // cookie中返回的menu里面包含着
      let menu = this.getCookie('jxMenu') // 操作记录,修改登录密码,条码机测试,读卡器测试; 和系统设置的子菜单一样的
      //  这个是在cookie获取的的菜单列表，只有后台上面有这个字段返回，才能匹配的上（由后端也要添加相应的字段）
      if (menu.indexOf(',' + e.label + ',') == -1) {
        // 新添加的往这里走了
        // if (i === 8) {
        //   console.log(this.menuList[8]);
        // }
        // console.log(i);
        /*
          在后端返回的字段，找不到这个字段的话，直接把本地添加的(一级菜单直接删除)删除
          这个判断，只要是过滤一级菜单和后端匹配不到的
        */
        this.menuList.splice(i, 1)
        // console.log(this.menuList.splice(i, 1)); // 这样打印肯定不行啊，前面一行都已经删掉了，这行的时候，这个数据都没有了
        i-- // 当删掉这个数组的时候，索引要减一个1
      } else {
        for (let j = 0; j < e.secondaryMenu.length; j++) {
          /*
              这个主要是过滤掉，在本地新添加的，但是后台返回来没有的二级字段，（注意：后台必须要有返回的字段，才能显示，前端和后端必须要一起添加）
          */
          const f = e.secondaryMenu[j]
          if (menu.indexOf(',' + f.label + ',') == -1) {
            // 删除本地添加的，而后台没有添加的
            e.secondaryMenu.splice(j, 1)
            // const aa = e.secondaryMenu.splice(j, 1);
            // console.log(aa);
            j-- // 当删掉二级这个数组的时候，索引要减一个1
          }
        }
      }
    }
    // ————————————————————结束————————————————
  },
  methods: {
    // 点击侧边栏中导入模块的时候，下载文件的链接
    download() {
      location.href =
        'https://carxin.oss-cn-beijing.aliyuncs.com/carxinSystem/importDemo/%E6%A8%A1%E5%9D%97%E5%AF%BC%E5%85%A5%E6%A8%A1%E7%89%88.rar'
    },
    // 点击使用手册的时候，打开一个新的页面是显示pdf文本
    userManual() {
      window.open(
        'https://carxin.oss-cn-beijing.aliyuncs.com/carxinSystem/userManual/%E6%9C%8D%E8%A3%85%E8%BF%9B%E9%94%80%E5%AD%98%E8%BD%AF%E4%BB%B6%E6%93%8D%E4%BD%9C%E6%96%87%E6%A1%A3.pdf'
      )
    },
    addNav(obj) {
      // 这两个if主要是当点击这'进销存分析'和'进销存总查询'提示一下用户，不能点击
      if (obj.label == '进销存分析') {
        this.$message.info('进销存分析暂不可用')
        return
      }
      if (obj.label == '进销存总查询') {
        this.$message.info('进销存总查询暂不可用')
        return
      }
      // console.log(obj)
      /*
      顶部导航的逻辑就是：
            1. 子菜单都是遍历生成，然后给他们都绑定相应的点击事件
            2. 当点击的时候，就拼接一个需要的对象（obj）传过去给vuex的数组
            3. 顶部封装一个小组件，然后，用vuex的这个数组，遍历这个组件就行
            4. navList: [{ name: "home", label: "首页" }], // 顶部的数据,首页这个数据一定要有
            5.  // 1. 前面这一句保证删掉前面的，2. 后面的一句保证删掉后面的
        state.navList.splice(1, index - 1) // 假如index === 2 的时候，那么证明这个数组只要三个，那么从第二项看、开始删除，一直删到倒数第二位 （这种情况，是当用户，恰好处于最后一个tag页面的时候）
        state.navList.splice(2) // 不管你所处在哪一个tag标签，当执
      */
      this.$store.commit('addNav', obj)
      // 获取菜单点击统计次数的方法
      menuNumberAdd(
        JSON.stringify({
          number: 1,
          permissionName: obj.label,
          href: obj.path
        })
      )
    },
    // 点击升级/续费的的按钮，触发这个函数
    open() {
      this.$router.push('/peningservice/opening_service')
      // 只要你想把点击的label放在top顶部，就必须要往vuex的容器中push({label: 'XXX', name: 'XXXX'})
      this.$store.commit('addNav', {
        label: '开通服务',
        name: 'opening_service'
      })
    },
    // 点击退出登录的时候，触发这个函数
    logOut() {
      this.$confirm('您确定要退出吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.location.href = '/login'
      })
    },
    //  当有客户调货信息的时候 ，点击Badge 标记 触发的这个函数
    goToAllocation() {
      if (this.isExpired) return
      if (localStorage.getItem('isStore') == 'true') return
      // console.log('client_transfer')
      this.$router.push('/customer/client_transfer')
      this.$store.commit('addNav', {
        label: '客户调货',
        name: 'client_transfer'
      })
    }
  },
  mounted() {
    const tabbarRef = this.$refs['tabbarRef'].clientWidth
    // console.log(tabbarRef)
  },
  watch: {}
}
</script>

<style scoped>
.tabbar {
  width: 10vw;
  display: flex;
}

/* 一级菜单 */
.bar-list {
  list-style-type: none;
  padding-top: 12px;
  margin: 0 auto;
}
.bar-list > div {
  border-radius: 8px;
  width: 9vw;
  margin: 4px auto;
  position: relative;
  cursor: pointer;
}
.bar-list div.active {
  background-color: #f2f2f2;
}
.bar-list img {
  margin-left: 14px;
}
.bar-list a {
  text-decoration: none;
  color: black;
  line-height: 40px;
  margin-left: 16px;
  width: 50px;
}
.bar-list p {
  line-height: 4vh;
  margin-left: 1vw;
  display: inline-block;
}

/* 二级菜单 */
.secondaryMenu {
  padding: 10px 0;
  border-radius: 8px;
  background-color: #fff !important;
  display: none;
  position: absolute;
  left: 8vw;
  top: -4.5vh;
  width: 266px;
  box-shadow: 0 0 5px #aaaaaa;
  z-index: 999;
}
.secondItems {
  float: left;
}
.secondaryMenu div {
  width: 130px;
  float: left;
}
.secondaryMenu div {
  width: 130px;
}
.secondaryMenu div a {
  line-height: 34px;
  display: block;
  width: auto;
}

.bar-list > div:hover .secondaryMenu {
  display: block;
  background: #f4f4f4;
}
.secondaryMenu .secondActive a {
  color: #017aff;
}

.secondaryMenu .secDisable {
  color: #c0c4cc;
}

/* 注册信息 */
.registerInfo {
  border-radius: 8px;
  position: absolute;
  width: 9vw;
  background-color: #f2f2f2;
  bottom: 8vh;
  padding-left: 1vw;
  margin-left: 0.5vw;
}
.registerInfo p {
  margin: 4px auto;
}
.registerInfo p:nth-child(1),
.registerInfo p:nth-child(3) {
  color: rgb(128, 128, 128);
}
.registerInfo p:nth-child(2) {
  margin-bottom: 8px;
}

#top_pic {
  width: 8vw;
  margin: 1vh 0 0 1vw;
}
#purchaseBtn {
  color: white;
  font-weight: bold;
  background-color: #017aff; /* 浏览器不支持时显示 */
  background-image: linear-gradient(to right, #409aff, #177cfc);
  position: absolute;
  left: 1vw;
  bottom: 22vh;
}
#prompt {
  background-color: #e5f1ff;
  /* border: 1px solid #017aff; */
  border-radius: 20px;
  position: absolute;
  left: 1vw;
  bottom: 34vh;
}
#outBtn {
  color: red;
  border: 1px solid red;
  position: absolute;
  bottom: 2vh;
  left: 1vw;
}
.tabbarBtn {
  width: 8vw;
  text-align: center;
  line-height: 4vh;
  margin: 0 auto;
  border-radius: 30px;
  font-size: 14px;
  cursor: pointer;
}
.Import {
  width: 8vw;
  text-align: center;
  line-height: 3.5vh;
  margin: 0 auto;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
  color: #017aff;
  position: absolute;
  bottom: 26.8vh;
  left: 1.5vh;
}
.Import1 {
  width: 8vw;
  text-align: center;
  line-height: 3.5vh;
  margin: 0 auto;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
  color: #017aff;
  position: absolute;
  bottom: 30vh;
  left: 1.5vh;
}
.topMsg {
  background-color: #f8f8f8;
  padding: 1.5vh 0;
  display: flex;
}
.topMsg p {
  margin-left: 1vw;
  font-weight: bold;
  white-space: nowrap;
}
</style>

<style>
.topMsg .el-badge {
  margin-left: 1.5vw;
}
.topMsg .el-badge i {
  font-size: 20px;
}
</style>
